<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" :leftIconSize="0" :placeholder="true" bgColor="#F9C022">
            <view class="xilu_left_slot" slot="left" @click="bindCityChange()">
                <!-- <image :src="logo" class="xilu_logo" mode="widthFix"></image> -->
                <view class="flex-box city fs24">{{currentCity?currentCity.name:''}}</view>
            </view>
            <view slot="center" class="xilu_center_slot flex-box" @click="search()">
                <view class="fs24 cola flex-grow-1">请输入搜索的内容</view>
                <!-- <view class="xilu_search_btn btn1">搜索</view> -->
            </view>
        </u-navbar>
        <Footer :footState="0" :num="messageCount"></Footer>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" bottom="120rpx" :safearea="true">
            <view class="container">
                <view class="xilu_bg_block"></view>
                <!--  -->
                <view class="xilu_hot_box">
                    <view class="flex-box flex-between pb35">
                        <view class="fs30 col3 fwb">热门分类</view>
                        <navigator url="/pages/classify/classify" open-type="navigate" hover-class="none" class="fs26 col89">全部分类+</navigator>
                    </view>
                    <view class="flex-box flex-wrap">
                        <view class="xilu_classic flex-box flex-wrap">
                            <view class="xilu_classic_item flex-box" v-for="(item,index) in hotCategoryList" :key="index" @click="bindGoodsList(item.id)">
                                <image :src="item.thumb_image_text" mode="aspectFill"></image>
                                <view class="flex-grow-1">
                                    <view class="col3 fs30">{{item.name}}</view>
                                    <view class="cola fs24">共{{item.product_count}}个商品</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!--  -->
                <swiper autoplay circular class="xilu_banner">
                    <swiper-item class="swiper-item" v-for="(item,index) in bannerList">
                        <view class="swiper-item">
                            <image :src="item.thumb_image" mode="aspectFill"></image>
                        </view>
                    </swiper-item>
                </swiper>
                <!--  -->
                <view class="flex-box flex-between plr30" v-if="bannerList2.length>0">
                    <!-- <view class="xilu_retrieve" @click="recoveryMore()">
                        <view class="flex-box flex-between pb10">
                            <view class="fs34 fwb">高价回收</view>
                            <view class="xilu_more">更多+</view>
                        </view>
                        <view class="col89 fs24 pb20">各种品类高价回收</view>
                        <view class="flex-box flex-between">
                            <image src="../../static/icon/index_retrieve.png" class="xilu_retrieve_goods" mode="aspectFill">
                            </image>
                            <image src="../../static/icon/index_retrieve.png" class="xilu_retrieve_goods" mode="aspectFill">
                            </image>
                        </view>
                    </view>
                    <view class="xilu_retrieve" @click="productMore()">
                        <view class="flex-box flex-between pb10">
                            <view class="fs34 fwb">二手集市</view>
                            <view class="xilu_more">更多+</view>
                        </view>
                        <view class="col89 fs24 pb20">海量二手商品供您选择</view>
                        <view class="flex-box flex-between">
                            <image src="../../static/icon/index_retrieve.png" class="xilu_retrieve_goods" mode="aspectFill">
                            </image>
                            <image src="../../static/icon/index_retrieve.png" class="xilu_retrieve_goods" mode="aspectFill">
                            </image>
                        </view>
                    </view> -->
                    <image v-if="index<2" v-for="(banner,index) in bannerList2" :src="banner.thumb_image" class="xilu_retrieve" mode="aspectFill" @click="bindMore(banner.minapp_url)"></image>
                    <!-- <image src="/static/images/goods.png" class="xilu_retrieve" mode="aspectFill"></image> -->
                </view>
              
				
				
				<!--  -->
                <view class="xilu_classic_list fs32 col89">
                    <view :class="classicIndex == index?'active':''" v-for="(item,index) in classList" @click="changeList(index)">{{item.name}}</view>
                </view>
                <!--  -->
                <goodslist :list="list" :showCollect="false"></goodslist>
                <view v-if="list.length==0" style="padding-bottom: 120rpx;">
                    <mescroll-empty></mescroll-empty>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import Footer from "@/components/footer/footer.vue";
    import goodslist from "@/components/goodslist/goodslist.vue";
    const chatIM = require('../../xilu/chat.js');
	const app = getApp();
    export default {
        components: {
            Footer,
            goodslist
        },
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                logo: '',
                hotCategoryList: [],
                bannerList: [],
				bannerList2:[],
                classList: [],
                classicIndex: 0,
                dataList: [],
                upOption: {
                    bgColor: "#F7F9FC",
                    textColor: "#aaa",
                    toTop: {
                        src: ""
                    },
                    empty: {
                        use: false,
                    }
                },
				currentCity: null,
				messageCount:0,
                list: [

                ],
            }
        },
        onLoad() {
            let page = this;
			this.currentCity = this.$core.getCurrentCity();
			uni.$on(app.globalData.Event.CurrentCityChange, function(currentCity) {
				page.currentCity = currentCity;
				page.refresh();
			})
			
            //热门分类-一级
            this.fetchHotCategory();
            //2.轮播图
            this.fetchBanner();
			//3.轮播图2
			this.fetchBanner2();
            //3.分类
            this.fetchSecondCategory()
            //4.商品
            uni.$on("unread_count", function(data) {
                page.messageCount = getApp().globalData.chat_config.messageCount;
            });
			if (getApp().globalData.chat_config.SocketTask) {
			   chatIM.setMessageBadge(false)
			}
        },
        onShow() {
        },
        onUnload() {
            uni.$off("unread_count");
			uni.$off(app.globalData.Event.CurrentCityChange);
        },
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
        methods: {
			//更换城市
			bindCityChange(){
				uni.navigateTo({
				    url: '/pages/change_city/change_city'
				})
			},
			//搜索
            search() {
                uni.navigateTo({
                    url: '/pages/search_result/search_result'
                })
            },
			//更多二手
			bindGoodsList(id){
				uni.navigateTo({
					url: '/pages/goods_list/goods_list?category_id='+id
				})
			},
			//更多
			bindMore(url){
				if(!url) return '';
				uni.navigateTo({
				    url: url
				})
			},
			//回收-废弃
            // recoveryMore() {
            //     uni.navigateTo({
            //         url: '/pages/recovery_list/recovery_list'
            //     })
            // },
            // productMore() {
            //     uni.navigateTo({
            //         url: '/pages/goods_list/goods_list'
            //     })
            // },
			//页面数据刷新
			refresh(){
				this.fetchHotCategory();
				this.fetchBanner();
				this.fetchBanner2();
				this.fetchSecondCategory();
				this.downCallback();
			},
			//热门分类
            fetchHotCategory() {
                this.$core.get({
                    url: 'xilumarket.product_category/recommend_lists',
                    data: {
                        pagesize: 4
                    },
                    loading: false,
                    success: ret => {
                        this.hotCategoryList = ret.data;
                    }
                })
            },
			//轮播图
            fetchBanner() {
                this.$core.get({
                    url: 'xilumarket.banner/banners',
                    data: {
                        group: 'index'
                    },
                    loading: false,
                    success: ret => {
                        this.bannerList = ret.data;
                    }
                })
            },
			//轮播图2
			fetchBanner2() {
			    this.$core.get({
			        url: 'xilumarket.banner/banners',
			        data: {
			            group: 'index2'
			        },
			        loading: false,
			        success: ret => {
			            this.bannerList2 = ret.data;
			        }
			    })
			},
            fetchSecondCategory() {
                this.$core.get({
                    url: 'xilumarket.product_category/recommend_second_lists',
                    data: {
                        pagesize: 20
                    },
                    loading: false,
                    success: ret => {
                        this.classList = ret.data;
                    }
                })
            },
            changeList(index) {
                this.classicIndex = index;
                this.downCallback();

            },
            downCallback() {
                // 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
                // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )     
                this.mescroll.resetUpScroll()
            },
            /*上拉加载的回调*/
            upCallback(page) {
                // 此处可以继续请求其他接口
                // if(page.num == 1){
                // 	// 请求其他接口...
                // }

                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let categoryId = this.classList.length > 0 ? this.classList[this.classicIndex].id : -1;
                this.$core.get({
                    url: 'xilumarket.product/lists',
                    data: {
                        category_id: categoryId,
                        page: pageNum,
                        pageSize: pageSize
                    },
                    loading: false,
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                        //let totalSize = data.total;
                        // 接口返回的是否有下一页 (true/false)
                        //let hasNext = data.current_page;

                        //设置列表数据
                        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
                        this.list = this.list.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);

                        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
                        //this.mescroll.endBySize(curPageLen, totalSize); 

                        //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
                        //this.mescroll.endSuccess(curPageLen, hasNext); 

                        //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
                        //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
                        //如果传了hasNext,则翻到第二页即可显示无更多数据.
                        //this.mescroll.endSuccess(curPageLen);

                        // 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
                        // 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发
                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)

                        // 上拉加载的 curPageLen 必传, 否则会一直显示'加载中...':
                        // 1. 使配置的noMoreSize 和 empty生效
                        // 2. 判断是否有下一页的首要依据:
                        //     当传的值小于page.size时(说明不满页了), 则一定会认为无更多数据;
                        // 比传入的totalPage, totalSize, hasNext具有更高的判断优先级;
                        // 3. 当传的值等于page.size时(满页), 才取totalPage, totalSize, hasNext判断是否有下一页
                        // 传totalPage, totalSize, hasNext目的是避免方法四描述的小问题

                        // 提示: 您无需额外维护页码和判断显示空布局,mescroll已自动处理好.
                        // 当您发现结果和预期不一样时, 建议再认真检查以上参数是否传正确
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })

            },
        },
    }
</script>

<style lang="scss" scoped>
    .xilu {
         background-color: #F7F9FC;
        &_logo {
            width: 80rpx;
            height: 80rpx;
        }

        &_center_slot {
            width: 400rpx;
            height: 75rpx;
            background: #FFFFFF;
            border-radius: 40rpx;
            border: 2rpx solid #555555;
            margin-left: 154rpx;
            padding: 0 12rpx 0 20rpx;
        }

        &_bg {
            width: 750rpx;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        &_bg_block {
            width: 750rpx;
            height: calc(486rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #F9C022 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        &_search_btn {
            width: 100rpx;
            height: 56rpx;
            font-size: 24rpx;
            line-height: 56rpx;
        }

        .container {
            background-color: #F7F9FC;
            min-height: auto;
            height: auto;
            padding-bottom: 0;
        }

        &_hot_box {
            width: 690rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;
            position: relative;
            z-index: 3;
            margin: 30rpx auto;
            padding: 36rpx 30rpx 6rpx;
        }

        &_classic {
            width: 100%;

            &_item {
                width: 50%;
                padding-bottom: 30rpx;

                image {
                    width: 65rpx;
                    height: 65rpx;
                    margin-right: 20rpx;
                }
            }
        }

        &_banner {
            width: 690rpx;
            height: 220rpx;
            margin: 0 auto 30rpx;

            image {
                width: 690rpx;
                height: 220rpx;
            }
        }

        &_retrieve {
            width: 330rpx;
            height: 295rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;

            // &:nth-child(2) .xilu_more {
            //     background: linear-gradient(130deg, #63CFFF 0%, #2A98FF 100%);
            // }

            // &_goods {
            //     width: 125rpx;
            //     height: 125rpx;
            //     background: #F7F9FC;
            //     border-radius: 15rpx;
            // }
        }

        &_more {
            width: 74rpx;
            height: 34rpx;
            background: linear-gradient(130deg, #FFC100 0%, #FF8200 100%);
            border-radius: 17rpx;
            font-size: 20rpx;
            color: #fff;
            text-align: center;
            line-height: 34rpx;
        }

        &_classic_list {
            padding: 40rpx 0;
            width: 100%;
            overflow-x: scroll;
            margin-bottom: 12rpx;
            white-space: nowrap;

            &::-webkit-scrollbar {
                display: none;
            }

            view {
                display: inline-block;
                margin-left: 55rpx;

                &.active {
                    font-size: 32rpx;
                    color: #101010;
                    position: relative;

                    &::after {
                        display: block;
                        content: "";
                        width: 31rpx;
                        height: 13rpx;
                        background: url(@/static/icon/index_active.png) no-repeat center;
                        background-size: 100%;
                        position: absolute;
                        bottom: -16rpx;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }

                &:first-child {
                    margin-left: 30rpx;
                }
                
                &:last-child {
                    margin-right: 30rpx;
                }
            }
        }

        &_goods {
            width: calc((100% - 30rpx) / 2);

            &_pic {
                width: 330rpx;
                height: 330rpx;
                border-radius: 20rpx;
                display: block;
                margin-bottom: 25rpx;
            }

            &_title {
                height: 68rpx;
                line-height: 34rpx;
            }

            &_avatar {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                margin-right: 15rpx;
            }
        }
        .city::after{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-width: 10rpx 10rpx 0;
            border-style: solid;
            border-color: #000 transparent transparent;
            margin-left: 10rpx;
        }
    }
</style>